<template>
  <view class="map-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="输入需要搜索的内容" 
          v-model="searchKeyword"
          @input="onSearchInput"
        />
        <image src="/static/static-lj/搜索.png" class="search-icon" />
      </view>
      <button class="list-mode-btn" @click="toggleListMode">
        列表模式
      </button>
    </view>

    <!-- 地图容器 -->
    <view class="map-container">
      <map
        id="gasMap"
        class="gas-map"
        :latitude="mapCenter.latitude"
        :longitude="mapCenter.longitude"
        :scale="mapScale"
        :markers="mapMarkers"
        @tap="onMapTap"
        @markertap="onMarkerTap"
        show-location
        enable-3D
        show-compass
        enable-overlooking
        enable-zoom
        enable-scroll
        enable-rotate
        @regionchange="onRegionChange"
        @updated="onMapUpdated"
        @markerclick="onMarkerClick"
      >
      </map>
      
      <!-- 地图加载提示 -->
      <view class="map-loading" v-if="!mapLoaded">
        <text class="loading-text">地图加载中...</text>
      </view>
      
      <!-- 定位加载提示 -->
      <view class="location-loading" v-if="isLocationLoading">
        <text class="loading-text">正在定位...</text>
      </view>
    </view>

    <!-- 最近加油站卡片 -->
    <view class="nearest-station-card" v-if="nearestStation">
      <view class="card-header">
        <text class="card-title">最近加油站</text>
        <text class="distance-text">{{ nearestStationDistance }}米</text>
      </view>
      <view class="card-content">
        <view class="station-info">
          <text class="station-name">{{ nearestStation.name }}</text>
          <text class="station-address">{{ nearestStation.address }}</text>
          <text class="station-price">油价：¥{{ nearestStation.price }}/L</text>
          <text class="station-detail-link" @click="goToStoreDetails(nearestStation)">① 门店详情>></text>
        </view>
        <image :src="nearestStation.image" class="station-image" />
      </view>
      <button class="navigate-btn" @click="navigateToNearestStation">立即导航</button>
    </view>

    <!-- 选中加油站详情卡片 -->
    <view class="station-detail-card" v-if="selectedStation && nearestStation && selectedStation.id !== nearestStation.id">
      <view class="card-content">
        <view class="station-info">
          <text class="station-name">{{ selectedStation.name }}</text>
          <text class="station-address">{{ selectedStation.address }}</text>
          <text class="station-detail-link" @click="goToStoreDetails(selectedStation)">① 门店详情>></text>
        </view>
        <image :src="selectedStation.image" class="station-image" />
      </view>
      <button class="navigate-btn" @click="navigateToStation">立即导航</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      mapCenter: {
        latitude: 35.2394,
        longitude: 113.2331
      },
      mapScale: 14,
      selectedStation: null,
      mapMarkers: [],
      mapLoaded: false,
      userLocation: {
        latitude: 35.2394,
        longitude: 113.2331
      },
      nearestStation: null,
      isLocationLoading: false,
      stations: [
        {
          id: 1,
          name: '中国石油加油站',
          address: '山阳区人民路与解放路交叉口',
          latitude: 35.2404,
          longitude: 113.2341,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.66',
          distance: 556,
          fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#']
        },
        {
          id: 2,
          name: '中国石油加油站',
          address: '山阳区人民路与解放路交叉口',
          latitude: 35.2414,
          longitude: 113.2351,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.66',
          distance: 880,
          fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#']
        },
        {
          id: 3,
          name: '中国石化加油站',
          address: '解放区建设路与民主路交叉口',
          latitude: 35.2424,
          longitude: 113.2361,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.68',
          distance: 1200,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 4,
          name: '壳牌加油站',
          address: '中站区解放西路与建设路交叉口',
          latitude: 35.2434,
          longitude: 113.2371,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.70',
          distance: 1500,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 5,
          name: '中化石油加油站',
          address: '马村区建设东路与文昌路交叉口',
          latitude: 35.2444,
          longitude: 113.2381,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.65',
          distance: 2000,
          fuelTypes: ['90#', '92#', '95#']
        },
        {
          id: 6,
          name: '延长石油加油站',
          address: '修武县云台大道与丰收路交叉口',
          latitude: 35.2454,
          longitude: 113.2391,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.62',
          distance: 2500,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 7,
          name: '中海油加油站',
          address: '温县人民路与建设路交叉口',
          latitude: 35.2464,
          longitude: 113.2401,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.64',
          distance: 3000,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 8,
          name: '中石化加油站',
          address: '博爱县解放路与民主路交叉口',
          latitude: 35.2474,
          longitude: 113.2411,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.67',
          distance: 3500,
          fuelTypes: ['90#', '92#', '95#', '98#']
        },
        {
          id: 9,
          name: '民营加油站',
          address: '武陟县建设路与文昌路交叉口',
          latitude: 35.2484,
          longitude: 113.2421,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.60',
          distance: 4000,
          fuelTypes: ['92#', '95#']
        },
        {
          id: 10,
          name: '中石油加油站',
          address: '孟州市人民路与解放路交叉口',
          latitude: 35.2494,
          longitude: 113.2431,
          image: '/static/static-lj/组 6@2x.png',
          price: '5.69',
          distance: 4500,
          fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#']
        }
      ]
    }
  },
  computed: {
    // 计算最近加油站的距离
    nearestStationDistance() {
      if (!this.nearestStation || !this.userLocation) {
        return 0;
      }
      return Math.round(this.calculateDistance(
        this.userLocation.latitude,
        this.userLocation.longitude,
        this.nearestStation.latitude,
        this.nearestStation.longitude
      ));
    }
  },
  onLoad(options) {
    console.log('地图页面加载，接收参数:', options);
    
    // 如果传递了加油站参数，则定位到该加油站
    if (options.stationId) {
      this.focusOnStation(options);
    } else {
      // 获取用户位置并显示所有加油站
      this.getUserLocation();
    }
  },
  
  onShow() {
    // 页面显示时检查定位状态
    this.checkLocationStatus();
  },
  methods: {
    // 获取用户位置
    async getUserLocation() {
      this.isLocationLoading = true;
      console.log('开始获取用户位置...');
      
      try {
        uni.showLoading({
          title: '定位中...'
        });
        
        const location = await this.getCurrentLocation();
        if (location.success) {
          this.userLocation = {
            latitude: location.latitude,
            longitude: location.longitude
          };
          
          // 更新地图中心点为用户位置
          this.mapCenter = {
            latitude: location.latitude,
            longitude: location.longitude
          };
          
          // 设置合适的缩放级别
          this.mapScale = 15;
          
          // 重新计算最近加油站
          this.findNearestStation();
          
          // 初始化地图标记
          this.initMapMarkers();
          
          console.log('定位成功:', {
            latitude: location.latitude,
            longitude: location.longitude,
            address: location.address,
            accuracy: location.accuracy
          });
          
          uni.showToast({
            title: '定位成功',
            icon: 'success',
            duration: 1500
          });
        } else {
          // 定位失败，使用默认位置
          this.userLocation = {
            latitude: 35.2159,
            longitude: 113.2418
          };
          
          this.mapCenter = {
            latitude: 35.2159,
            longitude: 113.2418
          };
          
          this.mapScale = 15;
          this.findNearestStation();
          this.initMapMarkers();
          
          console.log('定位失败，使用默认位置:', location.error);
          uni.showToast({
            title: '定位失败，使用默认位置',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('获取位置异常:', error);
        // 使用默认位置
        this.userLocation = {
          latitude: 35.2159,
          longitude: 113.2418
        };
        
        this.mapCenter = {
          latitude: 35.2159,
          longitude: 113.2418
        };
        
        this.mapScale = 15;
        this.findNearestStation();
        this.initMapMarkers();
        
        console.log('定位异常，使用默认位置');
        uni.showToast({
          title: '定位失败，使用默认位置',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.isLocationLoading = false;
        uni.hideLoading();
      }
    },
    
    // 获取当前位置
    getCurrentLocation() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          altitude: false,
          geocode: true,
          isHighAccuracy: true,
          highAccuracyExpireTime: 4000,
          success: (res) => {
            console.log('定位成功:', res);
            resolve({
              success: true,
              latitude: res.latitude,
              longitude: res.longitude,
              address: res.address || '未知地址',
              accuracy: res.accuracy
            });
          },
          fail: (err) => {
            console.log('获取位置失败:', err);
            
            // 检查是否是权限问题
            if (err.errMsg && err.errMsg.includes('auth deny')) {
              console.log('用户拒绝了定位权限');
              uni.showModal({
                title: '定位权限',
                content: '需要获取您的位置信息来为您推荐附近的加油站，请在设置中开启定位权限',
                showCancel: true,
                cancelText: '取消',
                confirmText: '去设置',
                success: (modalRes) => {
                  if (modalRes.confirm) {
                    uni.openSetting({
                      success: (settingRes) => {
                        if (settingRes.authSetting['scope.userLocation']) {
                          // 用户开启了权限，重新获取位置
                          this.getUserLocation();
                        }
                      }
                    });
                  }
                }
              });
            }
            
            // 定位失败时返回默认位置（焦作市）
            resolve({
              success: false,
              latitude: 35.2159,
              longitude: 113.2418,
              address: '焦作市',
              error: err.errMsg || '获取位置失败'
            });
          }
        });
      });
    },
    
    // 计算两点间距离（单位：米）
    calculateDistance(lat1, lng1, lat2, lng2) {
      const R = 6371000; // 地球半径（米）
      const dLat = (lat2 - lat1) * Math.PI / 180;
      const dLng = (lng2 - lng1) * Math.PI / 180;
      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                Math.sin(dLng / 2) * Math.sin(dLng / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return R * c;
    },
    
    // 找到最近的加油站
    findNearestStation() {
      let nearestStation = null;
      let minDistance = Infinity;
      
      this.stations.forEach(station => {
        const distance = this.calculateDistance(
          this.userLocation.latitude,
          this.userLocation.longitude,
          station.latitude,
          station.longitude
        );
        
        if (distance < minDistance) {
          minDistance = distance;
          nearestStation = station;
        }
      });
      
      this.nearestStation = nearestStation;
      console.log('最近的门店:', nearestStation);
      console.log('距离:', Math.round(minDistance), '米');
      
      return nearestStation;
    },
    
    // 初始化地图标记
    initMapMarkers() {
      console.log('开始初始化地图标记...');
      
      // 先找到最近的加油站
      this.findNearestStation();
      
      const stationMarkers = this.stations.map(station => {
        const isNearest = this.nearestStation && station.id === this.nearestStation.id;
        
        return {
          id: station.id,
          latitude: station.latitude,
          longitude: station.longitude,
          width: isNearest ? 30 : 25,
          height: isNearest ? 30 : 25,
          anchor: {
            x: 0.5,
            y: 0.8
          },
          iconPath: isNearest ? '/static/index/定位2.png' : '/static/index/定位2.png',
          callout: {
            content: isNearest ? `${station.name} (最近)` : station.name,
            color: '#fff',
            fontSize: isNearest ? 16 : 14,
            bgColor: isNearest ? '#ff6a2f' : '#0a78ff',
            padding: isNearest ? 12 : 10,
            borderRadius: 8,
            display: 'BYCLICK',
            textAlign: 'center'
          }
        };
      });
      
      // 添加用户位置标记
      const userMarker = {
        id: 'user',
        latitude: this.userLocation.latitude,
        longitude: this.userLocation.longitude,
        width: 30,
        height: 30,
        anchor: {
          x: 0.5,
          y: 0.5
        },
        iconPath: '/static/static-lj/椭圆 3 拷贝 2.png',
        callout: {
          content: '我的位置',
          color: '#fff',
          fontSize: 14,
          bgColor: '#ff4757',
          padding: 10,
          borderRadius: 8,
          display: 'BYCLICK',
          textAlign: 'center'
        }
      };
      
      // 合并所有标记
      this.mapMarkers = [...stationMarkers, userMarker];
      
      console.log('地图标记初始化完成:');
      console.log('- 加油站标记数量:', stationMarkers.length);
      console.log('- 最近门店:', this.nearestStation);
      console.log('- 总标记数量:', this.mapMarkers.length);
      console.log('- 第一个标记:', this.mapMarkers[0]);
    },
    
    // 搜索输入
    onSearchInput() {
      console.log('搜索关键词:', this.searchKeyword);
    },
    
    // 切换列表模式
    toggleListMode() {
      console.log('切换到列表模式');
      uni.navigateTo({
        url: '/index-item/gas-station/oiling',
        success: () => {
          console.log('跳转到列表页面成功');
        },
        fail: (err) => {
          console.log('跳转到列表页面失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 地图点击事件
    onMapTap(e) {
      console.log('地图点击:', e);
      this.selectedStation = null;
    },
    
    // 标记点击事件
    onMarkerTap(e) {
      const markerId = e.detail.markerId;
      if (markerId === 'user') {
        console.log('点击用户位置标记');
        return;
      }
      
      const station = this.stations.find(s => s.id === markerId);
      if (station) {
        this.selectedStation = station;
        console.log('选择加油站:', station);
      }
    },
    
    // 导航到加油站
    navigateToStation() {
      if (!this.selectedStation) {
        uni.showToast({
          title: '请先选择加油站',
          icon: 'none'
        });
        return;
      }
      
      console.log('导航到加油站:', this.selectedStation);
      uni.navigateTo({
        url: `/index-item/gas-station/navigation?stationId=${this.selectedStation.id}&name=${encodeURIComponent(this.selectedStation.name)}&address=${encodeURIComponent(this.selectedStation.address)}&latitude=${this.selectedStation.latitude}&longitude=${this.selectedStation.longitude}`,
        success: () => {
          console.log('跳转到导航页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 导航到最近加油站
    navigateToNearestStation() {
      if (!this.nearestStation) {
        uni.showToast({
          title: '未找到最近加油站',
          icon: 'none'
        });
        return;
      }
      
      console.log('导航到最近加油站:', this.nearestStation);
      uni.navigateTo({
        url: `/index-item/gas-station/navigation?stationId=${this.nearestStation.id}&name=${encodeURIComponent(this.nearestStation.name)}&address=${encodeURIComponent(this.nearestStation.address)}&latitude=${this.nearestStation.latitude}&longitude=${this.nearestStation.longitude}`,
        success: () => {
          console.log('跳转到导航页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 跳转到门店详情页面
    goToStoreDetails(station) {
      if (!station) {
        uni.showToast({
          title: '请先选择加油站',
          icon: 'none'
        });
        return;
      }
      
      console.log('跳转到门店详情页面:', station);
      uni.navigateTo({
        url: `/index-item/gas-station/store-details?stationId=${station.id}&name=${encodeURIComponent(station.name)}&address=${encodeURIComponent(station.address)}&latitude=${station.latitude}&longitude=${station.longitude}&price=${station.price}&image=${encodeURIComponent(station.image)}`,
        success: () => {
          console.log('跳转到门店详情页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 地图区域变化
    onRegionChange(e) {
      console.log('地图区域变化:', e);
    },
    
    // 地图更新完成
    onMapUpdated(e) {
      console.log('地图更新完成:', e);
      this.mapLoaded = true;
    },
    
    // 标记点击事件
    onMarkerClick(e) {
      console.log('标记点击事件:', e);
      const markerId = e.detail.markerId;
      if (markerId === 'user') {
        console.log('点击用户位置标记');
        return;
      }
      
      const station = this.stations.find(s => s.id === markerId);
      if (station) {
        this.selectedStation = station;
        console.log('选择加油站:', station);
      }
    },
    
    // 重新定位
    reLocate() {
      console.log('用户触发重新定位');
      this.getUserLocation();
    },
    
    // 检查定位状态
    checkLocationStatus() {
      if (!this.userLocation || !this.userLocation.latitude || !this.userLocation.longitude) {
        console.log('用户位置未初始化，开始定位');
        this.getUserLocation();
        return false;
      }
      return true;
    },
    
    // 定位到特定加油站
    focusOnStation(options) {
      const stationId = parseInt(options.stationId);
      const latitude = parseFloat(options.latitude);
      const longitude = parseFloat(options.longitude);
      const name = decodeURIComponent(options.name || '');
      
      console.log('定位到加油站:', { stationId, latitude, longitude, name });
      
      // 更新地图中心点和缩放级别
      this.mapCenter = {
        latitude: latitude,
        longitude: longitude
      };
      this.mapScale = 18; // 放大到更详细的级别
      
      // 查找对应的加油站数据
      const station = this.stations.find(s => s.id === stationId);
      if (station) {
        this.selectedStation = station;
        console.log('找到加油站数据:', station);
        
        // 显示提示信息
        uni.showToast({
          title: `已定位到${station.name}`,
          icon: 'success',
          duration: 2000
        });
      } else {
        console.log('未找到对应的加油站数据');
        // 如果找不到完整数据，使用传递的参数创建基本信息
        this.selectedStation = {
          id: stationId,
          name: name,
          latitude: latitude,
          longitude: longitude,
          address: '地址信息加载中...',
          price: '价格信息加载中...',
          image: '/static/组 6@2x.png'
        };
      }
      
      // 初始化地图标记
      this.initMapMarkers();
    }
  }
}
</script>

<style scoped>
.map-page {
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.map-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 350rpx; /* 蓝色区域高度 */
  background-color: #3184FD;
  z-index: 0; /* 在页面内容下方 */
}

/* 顶部导航栏 */
.header {
  position: relative;
  z-index: 10;
  background: #3184FD;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.back-icon {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  line-height: 1;
}

.nav-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.nav-icon {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

/* 搜索区域 */
.search-section {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: -20rpx;
}

.search-bar {
  flex: 1;
  background: #fff;
  border-radius: 25rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  height: 70rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  border: none;
  outline: none;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

.list-mode-btn {
  background: #ff6a2f;
  color: #fff;
  border: none;
  border-radius: 25rpx;
  padding: 0 20rpx;
  height: 70rpx;
  font-size: 24rpx;
  white-space: nowrap;
  min-width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 地图容器 */
.map-container {
  height: 600rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.gas-map {
  width: 100%;
  height: 100%;
}

/* 地图加载提示 */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 20rpx;
  z-index: 999;
}

.location-loading {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 20rpx;
  z-index: 999;
}

.loading-text {
  font-size: 28rpx;
  color: #fff;
}

/* 最近加油站卡片 */
.nearest-station-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: none;
  z-index: 1000;
}

.card-header {
  background: #0a78ff;
  padding: 16rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.distance-text {
  font-size: 24rpx;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

/* 加油站详情卡片 */
.station-detail-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1000;
}

.card-content {
  display: flex;
  padding: 20rpx 30rpx;
  align-items: center;
  gap: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.station-info {
  flex: 1;
}

.station-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.station-address {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.station-price {
  font-size: 24rpx;
  color: #ff6a2f;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
}

.station-detail-link {
  font-size: 24rpx;
  color: #0a78ff;
  display: block;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.station-detail-link:active {
  color: #0056b3;
}

.station-image {
  width: 120rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}

.navigate-btn {
  width: 100%;
  background: #0a78ff;
  color: #fff;
  border: none;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>